<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}




	.close {
		position: absolute;
		right: 8px;
		top: 0px;
		font-size: 22px;
		user-select: none;
		font-style: normal;
		cursor: pointer;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.close:hover {
		opacity: .1;
		transform: scale(1.2);
	}



	.close-ani {
		-webkit-animation-name: aniclose;
		animation-name: aniclose;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@-webkit-keyframes aniclose {
		0% {
			bottom: 0;
			left: 0
		}

		100% {
			bottom: -60vh;
			left: -100vw
		}
	}

	@keyframes aniclose {
		0% {
			bottom: 0;
			left: 0
		}

		100% {
			bottom: -60vh;
			left: -100vw
		}
	}

	.closetotop-ani {
		-webkit-animation-name: aniclosetop;
		animation-name: aniclosetop;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes aniclosetop {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -60vh;
		}
	}

	.closetoleft-ani {
		-webkit-animation-name: anicloseleft;
		animation-name: anicloseleft;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes anicloseleft {
		0% {
			left: 0;
			bottom: 0
		}

		100% {
			left: -100vw;
			bottom: 0
		}
	}

	.closetoright-ani {
		-webkit-animation-name: anicloseright;
		animation-name: anicloseright;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes anicloseright {
		0% {
			left: 0;
			bottom: 0
		}

		100% {
			left: 100vw;
			bottom: 0
		}
	}

	.closetobottom-ani {
		-webkit-animation-name: aniclosebottom;
		animation-name: aniclosebottom;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes aniclosebottom {
		0% {
			left: 0;
			bottom: 0vh
		}

		100% {
			left: 0;
			bottom: 100vh
		}
	}

	.popuptotop-ani {
		-webkit-animation-name: anipopuptop;
		animation-name: anipopuptop;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@-webkit-keyframes anipopuptop {
		0% {
			bottom: -60vh
		}

		50% {
			bottom: -4vh
		}

		65% {
			bottom: -4.5vh
		}

		75% {
			bottom: -1vh
		}

		100% {
			bottom: 0
		}
	}

	@keyframes anipopuptop {
		0% {
			bottom: -60vh;
			left: 0;
		}

		50% {
			bottom: -4vh;
			left: 0;
		}

		65% {
			bottom: -4.5vh;
			left: 0;
		}

		75% {
			bottom: -1vh;
			left: 0;
		}

		100% {
			bottom: 0;
			left: 0;
		}
	}

	.popuptoleft-ani {
		-webkit-animation-name: anipopupleft;
		animation-name: anipopupleft;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes anipopupleft {
		0% {
			left: -100vw;
			bottom: 0
		}

		50% {
			left: -4vw;
			bottom: 0
		}

		65% {
			left: -4.5vw;
			bottom: 0
		}

		75% {
			left: -1vw;
			bottom: 0
		}

		100% {
			left: 0;
			bottom: 0
		}
	}

	.popuptoright-ani {
		-webkit-animation-name: anipopupright;
		animation-name: anipopupright;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes anipopupright {
		0% {
			left: 100vw;
			bottom: 0;
		}

		50% {
			left: 4vw;
			bottom: 0;
		}

		65% {
			left: 4.5vw;
			bottom: 0;
		}

		75% {
			left: 1vw;
			bottom: 0;
		}

		100% {
			left: 0;
			bottom: 0;
		}
	}

	.popuptobottom-ani {
		-webkit-animation-name: anipopupbottom;
		animation-name: anipopupbottom;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	@keyframes anipopupbottom {
		0% {
			bottom: 100vh;
			left: 0;
		}

		50% {
			bottom: -4vh;
			left: 0;
		}

		65% {
			bottom: -4.5vh;
			left: 0;
		}

		75% {
			bottom: -1vh;
			left: 0;
		}

		100% {
			bottom: 0;
			left: 0;
		}
	}
</style>
<style>
	#btn {
		width: 60px;
		height: 60px;
		position: fixed;
		/* //固定定位设置 */
		right: 30px;
		bottom: 30px;
		background-color: rgb(207, 207, 207);
		border-radius: 30px;
		display: none;
		justify-content: center;
		align-items: center;
		color: honeydew;
	}

	.box {
		/* border: solid 1px #C9C9C9; */
		margin: 10px;
	}

	/* 如果list没给高度则给一个默认高度 */
	.iframe-card {
		height: 40vh;
	}

	.word-card {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

	}

	.word {
		/* margin:10px !important; */
		/* border: 1px solid #C9C9C9; */
		background-color: #fff;
		font-size: 12px;
		color: #ffffff;
		text-decoration: none;
		cursor: pointer;
		padding: 7px;
		background-color: gray;
		transition: all 0.6s;

	}

	.word:hover {
		transform: scale(1.2);
	}

	.show_component {
		border: 1px solid #C9C9C9;
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-top: 10px;
	}

	.btn-card {
		/* background-color: rgba(0, 0, 0, 0.507); */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
	}

	.btn-card .small {
		margin-right: 5px;
	}

	.avatar {
		margin: 10px;
		margin-bottom: 0px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.author-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.author-info .name {
		font-size: 14px;
		color: #444;
		line-height: 25px;
	}

	.author-info .tag {
		color: #aaa;
		font-size: 14px;
		line-height: 22px;
	}

	.author-info button {
		margin-left: auto;
		margin-right: 10px;
	}

	.bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.xx-waterflow {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<!-- ugc / 非全屏弹出框 start-->
<div class="popup_model_select_component_left_auto" data-closeani='close-ani'
	style="position: fixed;bottom: -100vh;height: 100vh;width: 50vw;background-color: #000;opacity: 0.9;color: #fff;">
	<i class="close">&#10005;</i>
	<div
		style="display: flex;flex-direction: row;width: 100%;margin-top: 40px;padding: 0 10px;height: calc(100% - 40px);">
		<div id="table_list" style="width: 100%;"></div>
	</div>
	<div id="component_list"></div>
</div>

<script type="text/javascript" id="modelscript">
	$("#left").mouseover(function () {
		var popup = $('.popup_model_select_component_left_auto'),
			btn = $(this),
			popup_closeani = btn.data('closeani'),
			btnani = btn.data('btnani'),
			popup_openani = btn.data('openani');
		popup.removeClass(popup_openani).removeClass(popup_closeani);
		btn.removeClass(btnani);
		setTimeout(function () {
			popup.addClass(popup_openani);
			btn.addClass(btnani);
		});
	});
	// 获取组件列表
	$("#component_list").load("https://res.dcdev.net/dcdev/v1.0.6/assets/html/render_somthing.html",
		"",
		function () {
			data = {
				id: "component_list",
				// x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
				direction: "y",
				search_config: {
					show: true,
				},
				// 每个ul的配置
				ul_config: {
					ul_class: "",
					ul_style: "",
				},
				// 每个li的配置
				li_config: {
					/*
					    字段变量使用 # 而不是 $ 来定义
					    如需唯一标识某个node，则添加data-key以作区分
					    如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
					*/
					li_class: "",
					li_style: "",
					li_html: {
						// 如果不设置条件渲染，则使用默认的html代码渲染
						default: {
							html: `
<div>
    <div>
    <img src="#{headimgurl}" alt="" style="width: 30px;height: auto;">
    </div>
    <div>#{desc}</div>
    <div>#{vendor}</div>
    <div>#{file_name}</div>
</div>`
						},
					}
				},
				// 各种类型的回调
				cb_config: {
					// 点击的回调
					click: function (res) {},
					// 获取数据之后的回调,如需提前干预可在此修改html之后返回
					data_fetched: function (res) {},
					// 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
					before_render: function (res) {},
					// 所有数据加载完毕的回调
					no_more: function (res) {},
				},
				// 请求及分页的配置
				data_config: {
					require: {
						url: `https://api.dcdev.net/v1.0.1/component/select_component.php`,
						data: {
							__PAGE_NUMBER: 1,
							__PAGE_COUNT: 20,
							__QUERY_COLUMNS: "",
							__ORDER: [],
						},
						method: "post",
						dataType: "json",
						require_data_param: "data",
						page_number_param: "__PAGE_NUMBER",
						page_count_param: "__PAGE_COUNT",
						data_count_param: "__COUNT",
						search_keyword_param: "__QUERY_COLUMNS",
						pagination: {
							enable: true,
						}
					},
				},
			};
			new render_class().render(data, null, null)
		});


	//阻止弹出框的点击事件冒泡
	$('.popup_model_select_component_left_auto').click(function (event) {
		event.stopPropagation();
	});
	//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
	$(document).click(function (event) {
		var popup = $('.popup_model_select_component_left_auto'),
			btn = $('.popupbtn_select_component'),
			popup_closeani = btn.data('closeani'),
			popup_openani = btn.data('openani'),
			target = $(event.target);
		if (target.hasClass('popupbtn_select_component') || $(target).hasClass('popup')) {
			return false;
		}
		//如果当前弹出框是出现状态，则点击后触发弹框返回
		if (popup.hasClass(popup_openani)) {
			popup.removeClass(popup_openani).addClass(popup_closeani);
		}
	});


	//弹出框的关闭按钮事件
	$('.close').on('click', function (event) {
		//阻止冒泡
		event.stopPropagation();
		var popup = $('.popup_model_select_component_left_auto'),
			btn = $('.popupbtn_select_component'),
			popup_closeani = btn.data('closeani'),
			popup_openani = btn.data('openani');
		popup.removeClass(popup_openani).addClass(popup_closeani);

	});
</script>
<!-- ugc / 非全屏弹出框 end-->